<template>
  <div>
    <div class="login">
      <div class="login-content">
          <div class="login-primary">
            <!--账号登录部分-->
            <ul id="content-1">
              <li @click="accountLogin()" :class="isChoicec1?'choice':''">账号登录</li>
              <li @click="wechatLogin()" :class="!isChoicec1?'choice':''">微信扫码登录</li>
            </ul>
            <!--用户输入验证部分-->
            <div class="content-2" v-show="isshow">
              <el-form :model="form">
                <el-form-item>
                  <el-input
                      style="height: 60px"
                      v-model="form.name"
                      type="text"
                      :prefix-icon="User"
                      @blur="bulrAccout"
                      size="large"
                      placeholder="请输入账号"
                  />
                  <div class="yzinfo">您还没有输入账号</div>
                </el-form-item>
                <el-form-item style="margin-top: 20px;">
                  <el-input
                      style="height: 60px"
                      v-model="form.password"
                      type="password"
                      size="large"
                      @blur="bulrPwd"
                      placeholder="请输入密码"
                      :prefix-icon="Sunset"
                      show-password
                  />
                  <div class="yzinfo">您还没有输入密码</div>
                </el-form-item>
              </el-form>
              <button class="registerbtn">登录</button>
              <p><a style="text-decoration: #C0C4CC">忘记密码？</a></p>
            </div>
            <!-- 微信扫码登录 -->
            <div class="content-2-wechat" v-show="!isshow">
              <img alt="图片走丢了" style="width: 250px;height: 250px;margin-top: 20px;">
            </div>
            <!--第三方登录-->
            <div class="content-3">
              <div style="width: 100px">
                <span class="el-icon-chat-dot-round"></span>微信
              </div>
              <div class="register">
                <a @click="goTo('/register')">注册账号 <span class="el-icon-arrow-right"></span></a>
              </div>
            </div>
          </div>
      </div>
    </div>
  </div>
</template>
<script>
import {reactive, toRefs,watch,} from "vue";
import { Sunset, User } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import router from "@/router";

export default{
  name: "login",
  setup(){
    let data = reactive({
      //用户输入表单信息
      form:{
        name:'',
        password:''
      },
      isChoicec1:true,
      isshow:true,

    })

    function login(){
      const reg = /^1[3-9]\d{9}$/ //手机号正则
      if(reg.test(data.form.name) && data.form.password!=='') {

      }else {
        if(data.form.name==''){
          ElMessage.error('请输入账号')
        }else if(data.form.password==''){
          ElMessage.error('请输入密码！')
        }else {
          ElMessage.warning('请输入正确的手机号')
        }
      }
    }

    //验证账号
    function bulrAccout(){
      if(data.form.name=='')
      ElMessage.warning('你还没有输入账号')
    }

    function bulrPwd(){
      if(data.form.password=='')
      ElMessage.warning('你还没有输入密码')
    }

    // 监听proxy数据的某个属性
    // 需要将监听值写成函数返回形式,vue3无法直接监听对象的某个属性变化
    watch(()=>data.form.name, (newValue,oldValue)=> {
      let Oinfo = document.getElementsByClassName('yzinfo')[0];
      if(newValue == ''){
        Oinfo.style.display = 'block'
      } else {
        Oinfo.style.display = 'none'
      }
    })

    watch(()=>data.form.password, (newValue,oldValue)=> {
      let Oinfo = document.getElementsByClassName('yzinfo')[1];
      if(newValue == ''){
        Oinfo.style.display = 'block'
      }else {
        Oinfo.style.display = 'none'
      }
    })

    function goTo(path){
      router.push(path)
    }

    return {
      ...toRefs(data),
      User,
      Sunset,
      login,
      bulrAccout,
      bulrPwd,
      goTo,
    }
  },
  components:{

  }
}

</script>
<style scoped lang="scss">
* {
  margin: 0;
  padding: 0;
}
a {
  text-decoration: none;
  cursor: pointer;
}
li {
  list-style-type: none;
}
.login {
  background-size: cover;
  height: 600px;
  background-image: url("http://lixinghe.meimeng.eu.org//flower/image/loginbg.webp");
  .login-content {
    width: 1200px;
    height: 100%;
    margin: 0 auto;
    display: flex;
    justify-content: end;
    align-items: center;
  }
  .login-primary {
    border: 1px solid gainsboro;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.2);
    border-radius: 30px;
    margin-top: 20px;
    float: right;
    width: 400px;
    background: #f9fafc;
    opacity: 0.8;
  }
}


#content-1 {
  border-radius: 30px;
  background-color: white;
  height: 52px;
  border-bottom: 1px solid red;
  line-height: 52px;
  border-bottom: 1px solid #E9ECF0;
  text-align: center;
  li{
    cursor: pointer;
    float: left;
    position: relative;
    width: 50%;
  }
}
.choice {
  color: orange;
  &::after {
    content: '';
    position: absolute;
    width: 120px;
    height: 2px;
    bottom: 0px;
    left: 37px;
    background: #FF734C;
  }
}
.content-2 {
  background-color: white;
  margin-top: 40px;
  text-align: center;
  input{
    height: 98%;
    border: none;
    outline: none;
    width: 340px;
    margin-left: 57px;
  }
  input::-webkit-input-placeholder{
    color: #C0C4CC;
  }
  span {
    display: inline-block;
    font-size: 26px;
    position: absolute;
    top: 15px;
    left: 20px;
  }
  button {
    font-size: 18px;
    border: none;
    color: white;
    border-radius: 30px;
    width: 82%;
    height: 50px;
    background-color: #F29BA5;
    margin-top: 40px;
    cursor: pointer;
  }
  p{
    height: 40px;
    line-height: 40px;
    a {
      font-size: 14px;
      color: #C0C4CC;
    }
  }
}
.account {
  margin-top: 20px;
  position: relative;
  background-color: white;
  width: 99%;
  line-height: 58px;
  height: 58px;
  /*border: 1px solid #E9ECF0;*/
}
.content-3 {
  display: flex;
  justify-content: space-around;
  border-radius: 30px;
  position: relative;
  height: 50px;
  line-height: 50px;
  margin-top: 20px;
  background: #F7F9FA;
}
.register {
  cursor: pointer;
  a {
    color: orange;
  }
}
.content-2-wechat {
  background-color: white;
  padding: 20px 0;
  text-align: center;
  width: 400px;
  height: 270px;
}
.yzinfo {
  color: red;
  font-size: 12px;
  position: absolute;
  height: 20px;
  display: none;
  top: 60px;
  line-height: 20px;
  left: 22px;
}

</style>
